<template>
    <div class="stableWrapper" @mouseover="stopAutoFlip" @mouseleave="startAutoFlip">
        <div class="tableHeader">
            <div>证券简称</div>
            <div>上市日期</div>
        </div>
        <div class="stable">
            <table class="sectorTable">
            <tr v-for="t in tableData" :key="t.sname">
                <th>{{ t.sname }}</th>
                <th>
                    <div class="tableRate">
                        {{ t.sDate }}
                    </div>
                </th>
            </tr>
        </table>
        <!-- 分页 样式映入的element-plus里面的分页样式 -->  
        <el-pagination  
            v-if="false"
            layout="prev, pager, next"  
            :total="total"  
            :page-size="pageSize"  
            v-model:current-page="page"  
            @current-change="handleCurrentChange"  
            :hide-on-single-page="false"
            :show-quick-jumper="false"
            :show-quick-go="false"
            :hidden="false"
        />  
        </div>
       
    </div>
</template>

<script lang="ts" setup>
    import {
        ref,
        onMounted,
        onUnmounted
    } from "vue";
    import axios from "axios";

    // 定义变量：分页 total总数  page当前第几页  pageSize每页条数  
    const total = ref(0);
    const pageSize = ref(7);
    const page = ref(1); // 将 currentPage 改为 page，因为 Element Plus 使用的是 current-page  
    const tableData = ref([]);

    // 定义一个 ref 来保存定时器ID
    const intervalId = ref<number | null>(null);

    // 查询  
    const callApi = () => {
        axios
            .get("http://127.0.0.1:8080/shares?page="+page.value+"&pageSize="+pageSize.value)
            .then((res: any) => {
                tableData.value = res.data.data.rows;
                total.value = res.data.data.total;
                console.log(res.data.data);
            })
            .catch((err: any) => {
                console.error(err); // 最好捕获错误并打印出来，方便调试  
            });
    }

    onMounted(() => {
        callApi();
    });

    // 分页下标导航  
    const handleCurrentChange = (val: number) => {
        page.value = val; // 更新当前页码  
        callApi();
    }

    // 启动定时器函数
    const startAutoFlip = () => {
        if (intervalId.value === null) {
            intervalId.value = setInterval(() => {
                const nextPage = page.value + 1;
                if (nextPage > Math.ceil(total.value / pageSize.value)) {
                    page.value = 1; // 翻到最后一页时跳回到第一页
                } else {
                    page.value = nextPage;
                }
                callApi();
            }, 5000); // 每隔5秒翻一页
        }
    }

    // 停止定时器函数
    const stopAutoFlip = () => {
        if (intervalId.value !== null) {
            clearInterval(intervalId.value);
            intervalId.value = null;
        }
    }

    onMounted(() => {
        startAutoFlip();
    });

    onUnmounted(() => {
        stopAutoFlip();
    });
</script>
<style>

    
    .tableHeader {
        width: 80%;
        height: 28px;
        display: flex;
        justify-content: space-around;
        padding-top: 5px;
        margin: auto;
        margin-top: 10px;
        text-align: center;
        background-color: #f7f7f72f;
        color: white;
    }
    
    .sectorTable {
        width: 80%;
        height: calc(100% - 60px);  
        margin: 10px auto;
        border-collapse: collapse;
    }
    
    .sectorTable th {
          background-color: #f7f7f72f;
        color: white;
        text-align: center;
    }
    
    .tableRate {
        display: flex;
        justify-items: center;
        color: dodgerblue;
    }
    
</style>